<template>
<div>
  <el-form :model="formData"  inline
      class="myForm">
    <el-form-item prop="doctorName">
      <el-input v-model="formData.doctorName" placeholder="请输入医生姓名"></el-input>
    </el-form-item>
     <el-form-item>
        <el-button @click="search" type="primary" icon="el-icon-search">查找</el-button>
        <el-button @click="openDialog('创建', 'add', null)" type="success" icon="el-icon-plus">添加</el-button>
      </el-form-item>
  </el-form>

    <el-table v-loading="tableLoading"  :data="tableData" border class="myTab"> 
      <el-table-column align="center" label="医生编号" prop="doctorId" width="80px" v-if="false"></el-table-column>
      <el-table-column align="center" label="医生姓名" prop="doctorName"></el-table-column>
      <el-table-column align="center" label="是否为专家" prop="statu" width="100px">
        <template slot-scope="scope">
          <el-tag :type="scope.row.statu == 1 ? 'success': '' ">
            {{scope.row['statu'] | filterTableItem(statuOptions)}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="年纪" prop="age" width="80px"></el-table-column>
      <el-table-column align="center" label="性别" prop="gender" width="80px">
        <template slot-scope="scope">
          <el-tag :type="scope.row.gender == 1 ? 'warning': 'danger'">
            {{scope.row['gender'] | filterTableItem(genderOptions)}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="身份证号" prop="idCard"></el-table-column>
      <el-table-column align="center" label="所属科室" prop="departmentId" width="100px">
        <template slot-scope="scope">
            {{scope.row['departmentId'] | departmentFilter(departmentOptions)}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="家庭住址" prop="homeAddress"></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        >
        <template slot-scope="scope">
           <el-button type="primary" icon="el-icon-edit" circle @click="openDialog('编辑', 'edit', scope.row)"></el-button>
            <el-button type="danger" 
            icon="el-icon-delete" circle @click="deleteData(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      class="myStyle"
      >
      </el-pagination>

      <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="500"
      >
      <el-form ref="dialogForm" :model="dialogFormData" label-width="100px" :rules="formRules">
        <el-form-item label="姓名" prop="doctorName">
          <el-input v-model="dialogFormData.doctorName"></el-input>
        </el-form-item>
        <el-form-item label="是否为专家" prop="statu">
            <el-select v-model="dialogFormData.statu" >
              <el-option  v-for="item in statuOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"></el-option>
            </el-select>       
        </el-form-item>   
        <el-form-item label="职位" prop="jobTitle">
          <el-input v-model="dialogFormData.jobTitle"></el-input>
        </el-form-item>  
        <el-form-item label="年龄" prop="age">
          <el-input v-model="dialogFormData.age"></el-input>
        </el-form-item>  
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="dialogFormData.idCard"></el-input>
        </el-form-item>  
        <el-form-item label="性别" prop="gender">
            <el-select v-model="dialogFormData.gender" >
              <el-option  v-for="item in genderOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"></el-option>
            </el-select>  
        </el-form-item>  
        <el-form-item label="科室" prop="departmentId">
          <el-select v-model="dialogFormData.departmentId" >
              <el-option  v-for="item in departmentOptions"
                          :key="item.departmentId"
                          :label="item.departmentName"
                          :value="item.departmentId"></el-option>
            </el-select>  
        </el-form-item>   
        <el-form-item label="家庭住址" prop="homeAddress">
          <el-input v-model="dialogFormData.homeAddress"></el-input>
        </el-form-item>   
        <el-form-item label="医生密码" prop="doctorPass">
          <el-input v-model="dialogFormData.doctorPass"></el-input>
        </el-form-item>  
      </el-form>

      <span slot="footer">
        <el-button @click="confirm" type="primary">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    </div>
</template>


<script>
import axios from "axios";

export default {
  name: "doctor",
  comName: "医生管理",
  data() {
    return {
      tableData: [],
      tableLoading: false,
      dialogVisible: false,
      dialogTitle: '创建',
      dialogType: 'add',
      docId:'',
      formData: {
        doctorName: "",
      },
      dialogFormData: {
        doctorName:'',
        statu:'',
        age:'',
        idCard:'',
        gender:'',
        departmentId:'',
        homeAddress:'',
        jobTitle:'',
        doctorPass:''
      },
      pageInfo: {
        page: 1,
        limit: 10,
        total: 0,
      },
      statuOptions:[
        {label:'是',value:'1'},
        {label:'否',value:'2'},
      ],
      genderOptions:[
        {label:'男',value:'1'},
        {label:'女',value:'2'},
      ],
      departmentOptions:[],
      formRules: {
        doctorName: [{ required: true, trigger: "change",message: "请确认正确的信息"  }],
        floor: [{ required: true, trigger: "change", message: "请确认正确的信息"  }],
        statu: [{ required: true, trigger: "change", message: "请确认正确的信息"  }],
        jobTitle: [{ required: true, trigger: "change", message: "请确认正确的信息"  }],
        idCard: [{ required: true, trigger: "change", message: "请确认正确的信息"  }],
        gender: [{ required: true, trigger: "change", message: "请确认正确的信息"  }],
        departmentId: [{ required: true, trigger: "change", message: "请确认正确的信息"  }],
        homeAddress: [{ required: true, trigger: "change", message: "请确认正确的信息"  }],
        doctorPass: [{ required: true, trigger: "change", message: "请确认正确的信息"  }],
        age: [{ required: true, trigger: "change", message: "请确认正确的信息"  }],
      },
    }
    
  },
  mounted() {
    this.getDepartmentList();
    this.search();
  },  
  filters: {
    filterTableItem (value, options) {
      let index = options.findIndex(item => {
        return Number(item.value) === Number(value)
      })
      if (index < 0) {
        return '---'
      } else {
        return options[index].label
      }
    },
     departmentFilter(value, options) {
      let index = options.findIndex(item => {
        return Number(item.departmentId) === Number(value) 
      })
      if (index < 0) {
        return '---'
      } else {
        return options[index].departmentName
      }
    }
  },
  methods: {
    openDialog (title, type, row) {
      this.dialogVisible = true
      this.dialogType = type
      this.dialogTitle = title
      if (type === 'edit') {
        this.$nextTick(() => {
          this.dialogFormData = Object.assign({}, row)
        })
      }
    },
    confirm () {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          if (this.dialogType === 'add') {
            this.addData()
          } else if (this.dialogType === 'edit') {
            this.editData()
          }
        } else {
          return false
        }
      })
    },
    cancel () {
      this.$refs.dialogForm.resetFields()
      this.dialogVisible = false
    },

    addData(){
      axios({
        url:'/api/admin/addDoctor',
        method:'post',
        data:{
          ...this.dialogFormData
        },
         headers: {
             token: sessionStorage.getItem("Token"),
          }
      }).then(res=>{
         if (res.data.error === 0) {
          this.cancel()
          this.$notify.success({title: '添加成功'})

          this.search()
        } else {
          this.$notify.error({title: '添加失败'})
        }
      })
    },
     editData () {
      axios({
        url: '/api/admin/updateDoctor',
        method: 'post',
        data: {
          ...this.dialogFormData
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        }
      }).then(res => {
        if (res.data.error === 0) {
          this.cancel()
          this.$notify.success({title: '编辑成功'})

          this.search()
        } else {
          this.$notify.error({title: '编辑失败'})
        }
      })
    },
    deleteData (row) {
      this.$confirm('此操作将删除这条信息, 是否继续?').then(() => {
        axios({
          url: "/api/admin/deleteDoctor",
          method: 'post',
          data: {
            doctorId:row.doctorId
          },
          headers: {
             token: sessionStorage.getItem("Token"),
          }
        }).then(res => {
          this.$notify.success({title: '删除成功'})
          this.search()
        })
      })
    },
    search () {
      this.tableLoading = true

      axios({
        url: "/api/user/searchdoctor",
        method: "post",
        data: {
          ...this.formData,
          limit:this.pageInfo.limit,
          page:this.pageInfo.page,
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then(res => {
        this.tableData = res.data.list;
        this.tableLoading = false;

        this.pageInfo.total=res.data.total
          
      });
    },
    getDepartmentList () {
      axios({
        url: "/api/admin/departmentlist",
        method: "get",
        params: {
          
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then(res => {
        console.log(res)
        this.departmentOptions = res.data.list;
      });
    },
    // 每页多少条切换
    handleSizeChange (value) {
      this.pageInfo.limit = value

      this.search()
    },
    // 当前页码的切换
    handleCurrentChange (value) {
      this.pageInfo.page = value

      this.search()
    }
  }
}
</script>

<style lang="scss" scoped>
.myTab {
  width: 95%;
  text-align: center;
  margin: 0 auto;
}

.myForm{

margin-top: 30px;
margin-right: 29px;
text-align: right;
}
.myStyle {
  margin-top: 40px;
  text-align: center;
}
</style>

